<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		watch: 侦听属性
		监控属性的变，侦听"已有"属性的变化
	
        一个值变化，影响到多个内容的时候，用watch(就这一个方向)
		没有缓存
		逻辑介于computed和methods中间
		
	    只有watch侦听 $route(路由对象)
	
		<div id="app">
			姓：<input type="text" v-model="firstName">+
			名：<input type="text" v-model="lastName">
			{{fullName}}
			<input type="text" v-model="fullName">
			<br><br>
			<input type="text" v-model="obj.numa">
		</div>
		<script>
			let vm=new Vue({
				el:"#app",
				data:{
					firstName:"李",
					lastName:"丽丽",
					fullName:"李-丽丽",
					obj:{
						numa:10,
						numb:20
					}
				},
				watch:{
					// fullName(newValue,oldValue){//简写
					// 	//newValue：最新的内容  oldValue：上一次的内容
					// 	console.log(newValue,oldValue);
					// 	let arr=newValue.split("-");
					// 	this.firstName=arr[0];
					// 	this.lastName=arr[1];
					// }
					
					// "fullName":{//全写--添加属性
					// 	handler(newValue,oldValue){
					// 		console.log(newValue,oldValue);
					// 		let arr=newValue.split("-");
					// 		this.firstName=arr[0];
					// 		this.lastName=arr[1];
					// 	},
					// 	immediate:true//打开组件立即侦听 ****
					// }
					
					// "obj.numa":{
					// 	handler(newValue,oldValue){
					// 		console.log(newValue,oldValue);
					// 	}
					// }
					
				    "obj":{
				    	handler(newValue,oldValue){
				    		console.log(newValue,oldValue);
				    	},
						immediate:true,
						deep:true//深度侦听
				    }
				}
			})
		</script>
	</body>
</html>
